<template>
  <div class="mod-home">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span><b class="titles">基本情况和基础数据</b></span>
          </div>
            <el-table
              :data="basisDataList"
              :show-header="false"
              style="width: 100%"
              :row-style="tableRowStyle">
              <el-table-column
                prop="articleTitle"
                label="标题"
                align="center">
              </el-table-column>
              <el-table-column
                prop="def2"
                align="center"
                label="文章类型">
              </el-table-column>
              <el-table-column
                prop="createTime"
                align="center"
                label="发布时间">
              </el-table-column>
            </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <span><b class="titles">乡村振兴（办公室、信息中心）</b></span>
        </div>
        <el-table
          :data="revivalDataList"
          style="width: 100%;"
          :show-header="false">
          <el-table-column
            prop="articleTitle"
            label="标题"
            align="center">
          </el-table-column>
          <el-table-column
            prop="def0"
            align="center"
            label="文章类型">
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="发布时间">
          </el-table-column>
        </el-table>
      </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span><b class="titles">局业务工作</b></span>
          </div>
          <el-table
            :data="businessDataList"
            style="width: 100%"
            :show-header="false">
            <el-table-column
              prop="title"
              label="标题"
              align="center">
            </el-table-column>
            <el-table-column
              prop="def0"
              align="center"
              label="文章类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              label="发布时间">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span><b class="titles">通讯录</b></span>
          </div>
          <el-table
            :data="addressbookDataList"
            style="width: 100%"
            :show-header="false">
            <el-table-column
              prop="username"
              label="用户名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="mobile"
              align="center"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              label="发布时间">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      basisDataList: [],
      revivalDataList: [],
      businessDataList: [],
      addressbookDataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/basisdata/basisdata/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.basisDataList = data.page.list
          this.basisDataList.forEach(item => {
            item.def2 = this.articleTypeChange(item.articleType)
          })
          this.basisDataList = this.currencyHandle(this.basisDataList)
          this.requestRevival()
          this.requestBusiness()
          this.requestAddressbook()
        } else {
          this.basisDataList = []
        }
      })
    },
    tableRowStyle ({ row, rowIndex }) {
      return 'background-color: white;'
    },
    currencyHandle (list) {
      list.sort((a, b) => {
        return a.createTime > b.createTime ? -1 : 1
      })
      list = list.splice(0, 5)
      return list
    },
    articleTypeChange (articleType) {
      switch (articleType) {
        case 0:
          return '市情及农业基本情况'
        case 1:
          return '运城市农村基本情况'
        case 2:
          return '运城市农业生产情况'
        case 3:
          return '局基本情况'
        case 4:
          return '各县(市,区)基本情况'
      }
    },
    businessChange (articleType) {
      switch (articleType) {
        case 0:
          return '农业产出'
        case 1:
          return '生产能力'
        case 2:
          return '绿色发展'
        case 3:
          return '乡村建设'
        case 4:
          return '产业发展'
        case 5:
          return '农村改革'
      }
    },
    requestRevival () {
      this.$http({
        url: this.$http.adornUrl('/revival/revivalcity/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          data.page.list.forEach(item => {
            item.def0 = '城市'
          })
          this.revivalDataList = data.page.list
          this.$http({
            url: this.$http.adornUrl('/revival/revivalcountry/list'),
            method: 'get',
            params: this.$http.adornParams({
              'page': this.pageIndex,
              'limit': this.pageSize
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              data.page.list.forEach(item => {
                item.def0 = '国家'
              })
              this.revivalDataList = this.revivalDataList.concat(data.page.list)
              this.$http({
                url: this.$http.adornUrl('/revival/revivalprovince/list'),
                method: 'get',
                params: this.$http.adornParams({
                  'page': this.pageIndex,
                  'limit': this.pageSize
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.dataList = data.page.list
                  data.page.list.forEach(item => {
                    item.def0 = '省份'
                  })
                  this.revivalDataList = this.revivalDataList.concat(data.page.list)
                  this.revivalDataList = this.currencyHandle(this.revivalDataList)
                } else {
                  this.revivalDataList = []
                }
              })
            } else {
              this.revivalDataList = []
            }
          })
        } else {
          this.revivalDataList = []
        }
      })
    },
    requestBusiness () {
      this.$http({
        url: this.$http.adornUrl('/business/businesswork/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.businessDataList = data.page.list
          this.businessDataList.forEach(item => {
            item.def0 = this.businessChange(item.articleType)
          })
          this.businessDataList = this.currencyHandle(this.businessDataList)
        } else {
          this.businessDataList = []
        }
      })
    },
    requestAddressbook () {
      this.$http({
        url: this.$http.adornUrl('/addressbook/addressbook/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.addressbookDataList = data.page.list
          this.addressbookDataList = this.currencyHandle(this.addressbookDataList)
        } else {
          this.addressbookDataList = []
        }
      })
    }
  }
}
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    margin-bottom: 18px;
  }

  .el-card__header{
   background: lightslategray;
  }

  .titles{
    color: whitesmoke;
  }

</style>

